<template>
 <!-- pages/waterfall/waterfall.wxml -->
 <view class="container">
	 <view>
		 <text>日</text>
		 <text>周</text>
		 <text>月</text>
		 <text>年</text>
	 </view>
   <canvas canvas-id="myCanvas" style="width: 300px; height: 400px;"></canvas>
 </view>
</template>

<script>
export default {
  data() {
    return {
          // 瀑布图的数据
          waterfallData: [
            { label: '初始值', value: 1000 },
            { label: '增加', value: 300 },
            { label: '减少', value: -200 },
            { label: '再增加', value: 400 },
            { label: '最终值', valueType: 'total' } // 标记为总值，用于特殊绘制
          ]
        }
  },
  onReady() {
     this.drawWaterfallChart();
  },
  methods: {
   drawWaterfallChart() {
       const ctx = wx.createCanvasContext('myCanvas'); // 获取canvas上下文
       const data = this.waterfallData;
       const barWidth = 30; // 条形宽度
       const gap = 10; // 条形间距
       let startX = 20; // 起始X坐标
       let startY = 150; // 起始Y坐标（根据画布大小调整）
       let currentValue = data[0].value; // 当前累计值
    
       data.forEach((item, index) => {
         let barHeight = (item.value > 0 ? item.value : -item.value) * 2; // 根据值计算条形高度（这里乘以2是为了放大效果）
         let color = item.value > 0 ? '#4caf50' : '#f44336'; // 根据增减设置颜色
    
         // 绘制条形
         ctx.setFillStyle(color);
         ctx.fillRect(startX, startY - barHeight, barWidth, barHeight);
    
         // 绘制标签和数值
         ctx.setFillStyle('#000');
         ctx.fillText(item.label, startX + barWidth + gap, startY);
         ctx.fillText(item.value > 0 ? `+${item.value}` : `${item.value}`, startX + barWidth / 2 - (item.value > 0 ? '+'.length : 0), startY - barHeight / 2 + (item.value < 0 ? 3 : 0)); // 调整负数值的显示位置
    
         // 更新累计值和Y坐标
         currentValue += item.value;
         startY -= barHeight + gap; // 增加间距以便下一个条形绘制
    
         // 如果是总值，则特殊处理（比如加粗或不同颜色）
         if (item.valueType === 'total') {
           ctx.setLineWidth(2);
           ctx.setStrokeStyle('#000');
           ctx.strokeRect(startX, startY - barHeight, barWidth, barHeight);
           ctx.setFillStyle('#000');
           ctx.fillText(`总计: ${currentValue}`, startX + barWidth / 2 - '总计: '.length / 2, startY - barHeight / 2);
         }
       });
    
       // 绘制完成，调用draw方法
       ctx.draw();
     }
  }
};
</script>

<style scoped>
  /* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
 .container {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100vh;
 }
</style>